import "./App.css";
import Title from "@/components/Title";
import { Button } from "antd";
import BaseEchart from "@/components/BaseEchart";
import BaseMap from "@/components/BaseMap";
import type { EChartsOption } from "echarts";

function App() {
	const getOption = () => {
		const options: EChartsOption = {
			title: {
				text: "堆叠区域图"
			},
			tooltip: {
				trigger: "axis"
			},
			legend: {
				data: ["邮件营销", "联盟广告", "视频广告"]
			},
			toolbox: {},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					axisLine: {
						show: true,
						lineStyle: {
							color: "#000",
							width: 2,
							type: "solid"
						}
					},
					axisTick: {
						show: true,
						lineStyle: {
							color: "#000",
							width: 2
						}
					},
					axisLabel: {
						//x轴文字的配置
						show: true,
						color: "#000",
						backgroundColor: "#ddd",
						fontWeight: "bold"
					}
				}
			],
			yAxis: [
				{
					type: "value",
					axisLine: {
						show: true,
						lineStyle: {
							color: "#f00",
							width: 4,
							type: "dashed"
						}
					},
					axisTick: {
						show: true,
						lineStyle: {
							color: "blue",
							width: 6
						}
					},
					axisLabel: {
						//x轴文字的配置
						show: true,
						color: "yellow",
						backgroundColor: "red",
						padding: 4,
						borderRadius: 6,
						fontWeight: "bold"
					}
				}
			],
			series: [
				{
					name: "邮件营销",
					type: "line",
					stack: "总量",
					areaStyle: {},
					data: [120, 132, 101, 134, 90, 230, 210]
				},
				{
					name: "联盟广告",
					type: "line",
					stack: "总量",
					areaStyle: {},
					data: [220, 182, 191, 234, 290, 330, 310]
				},
				{
					name: "视频广告",
					type: "line",
					stack: "总量",
					areaStyle: {},
					data: [150, 232, 201, 154, 190, 330, 410]
				}
			]
		};
		return options;
	};

	return (
		<>
			<div>APP</div>
			<Title />
			<Button type="primary">Antd Button</Button>
			<div style={{ display: "flex" }}>
				<BaseEchart
					option={getOption()}
					style={{ height: "500px", flex: 1 }}
				/>
				<BaseMap />
			</div>
		</>
	);
}

export default App;
